<template>
  <div class="container">
    <div class="show" @click="goBack">
      <el-icon><Back /></el-icon>
      返回
    </div>
    <div>
      <el-card>
        <el-row>
          <el-col :span="8">
            <el-form-item label="单位所在辖区">
              {{
            getTranslate(areaList, "code", detail?.jurisdiction, "name")
          }}
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="申请类别">
              {{
            getTranslate(companyType, "code", detail?.category, "name")
          }}
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="申请单位名称">
              {{ detail?.enterpriseName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培训人数">
              {{ detail?.number }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人姓名">
              {{ detail?.contactName }}  {{ detail?.phone }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培训时间">
              {{ detail?.trainingTime }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注">
              {{ detail?.remark }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间">
              {{ detail?.createdAt }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核意见">
              {{ detail?.auditReason }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="图片">
              
              <!-- <img width="160" height="160" v-for="(x,index) in detail?.list" key="index" :src="baseURL+x.sysFileUrl" alt="" srcset=""> -->

              <el-image
              v-for="(x,index) in detail?.list" key="index"
      style="width: 160px; height: 160px"
      :src="baseURL+x.sysFileUrl"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="srcList"
      :initial-index="index"
      fit="cover"
    />
            </el-form-item>
          </el-col>
        </el-row>

      </el-card>

    </div>
  </div>
</template>

<!-- {/* <CustomCell label="单位所在辖区" value={getSystemDictValue(13,detail?.jurisdiction)?.name} />
<CustomCell label="申请类别" value={getSystemDictValue(77,detail?.category).name} /> */} -->


<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import { useRoute } from "vue-router";
import Table from "@/components/pageTable/table";
import { ElMessage } from "element-plus";
import Page from "@/components/pageTable/Page.vue";
import { pageInfomationSum } from "@/api/totalManage.ts";
import { Search } from "@element-plus/icons-vue";
import { getTranslate } from "@/util";
import router from "@/router";
import { selectDicts } from "@/api/system";
import { getTrainingInfoWaitById } from "@/api/apply";
import { baseURL } from "@/util/request";
const route = useRoute();

const detail = ref<object>({});
  const areaList = ref<any[]>([]);
  const companyType = ref<any[]>([]);
  const srcList = ref<any[]>([]);
    
onMounted(async () => {
  console.log(route.query.id)
  await getDictList()
  await getDetail(route?.query?.id)
});

async function  getDictList(){
  const {data} =  await selectDicts()
  console.log(data[77])
  areaList.value = data[13]
  companyType.value = data[77]
}

const getDetail =  async(id:any)=>{
  const {success,data} =  await getTrainingInfoWaitById({id:id})
  if(success){
    detail.value = data
    let arr = []
    data?.list.forEach(element => {
      arr.push(baseURL+element.sysFileUrl)
    });
    srcList.value = arr
  }
}


function goBack() {
  // console.log(233232)
  // router.back();
  router.push({ path: "/trainList" });
}


</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
.statistic-item {
  display: flex;
  justify-content: center;
}
.show {
  height: 39px;
  border-bottom: 1px solid #eee;
  position: relative;
  padding: 5px;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
}
</style>
